<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link type="text/css" href="/playdoll/css/nav.css" rel="stylesheet" media="screen" /> 
<link type="text/css" href="/playdoll/css/ShoppingCart_moreinfo.css" rel="stylesheet" media="screen" /> 

<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.fancybox.css" media="screen" />

<style type="text/css">
                /*登入燈箱*/       
                
		.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}

		
	
</style>
<script>
    $(function(){
                                                $("#log2").click(function(){
                                                     alert("請先登入!");
                                                 });
                                             });
    
</script>
<div id="nav_up"> 
	
	<table id="nav_up">
		<tr>
                    <%if(session.getAttribute("orderId")==null) { %>
                    <td rowspan="3"><a href="/playdoll/home" id="logo" ><img src="../images/newLogo.png" style="width:260px;height:81px;"></a></td>
			<td>&nbsp</td>
			<td>&nbsp</td>
		</tr>
		<%  }else {  %>
                      <td rowspan="3"><a href="../shop/end" id="logo" ><img src="../images/newLogo.png" style="width:260px;height:81px;"></a></td>
			<td>&nbsp</td>
			<td>&nbsp</td>
                <% } %>
		<tr>
			
			<td>&nbsp</td>
			<td style="text-align:right;">
                                <% if(session.getAttribute("User")==null){ %>
                                <a style=" text-decoration: none;" class="fancybox fancybox.iframe"  href="../Login/LoginPart.jsp">
                                        <b1>登入</b1>
                                </a>
                                <% }else if(session.getAttribute("User")!=null){  %>
                                        <b1>
                                            ${User}&nbsp您好！&nbsp&nbsp
                                            <a href="/playdoll/login/Logout" style="text-decoration: none;font-size: 0.75em;color: #ffffff;"> 
                                                    登出 
                                            </a>
                                        </b1>
                                <% } %>
				<b1>&nbsp/</b1>
                                <% if(session.getAttribute("User")==null){ %>     
				 <a style=" text-decoration: none;" class="fancybox fancybox.iframe" id="log2" href="../Login/LoginPart.jsp">                       
                                       	<b1>購物車</b1>
                                 </a>
                                     <% } else {%>
                                     <a href="../shop/addToCart" class="thumbnail">                                
                                        <i class="fa fa-shopping-cart">
						<b1>購物車</b1>
					</i>
                                   
                                    <span>
                                        <fieldset >
                                            <legend align="center" style="font-size: 1.5em;font-weight: bold;">購物車</legend>
                                            <table style="color: #ffffff" align="center" >  
                                              
                                                <% if(session.getAttribute("Cart")==null){ request.setAttribute("message","購物車內還沒有任何商品哦！(哈哈哈)");  %>
                                                <tr><td colspan="3" style="width:300px;">${message}<br>
                                                 <% }else { %>
                                                <c:forEach items="${Cart}" var="item">
                                                    <tr><td colspan="3" ><li><ol>${item["name"]}</ol></li><br>
                                                
                                                    </td></tr>
                                                </c:forEach>  
                                                <% } %>
                                                
                                                <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr>
                                                <hr>
                                                <!--<tr>
                                                    <td align="left"><input type="button" value="查看購物車"></td>
                                                    <td align="right"><input type="button" value="前往結帳"></td>
                                                </tr>-->
                                            </table>
                                        </fieldset>
                                        
                                    </span>  
                                                    <% } %>
				</a>
			</td>
		</tr>
		
		<tr>
			
			<td>&nbsp</td>
			<td>&nbsp</td>		
		</tr>

	</table>
</div>
<!--登入燈箱 -->
<script>
		$(document).ready(function() {
			/*
			 *  Simple image gallery. Uses default settings
			 */

			$('.fancybox').fancybox();

			/*
			 *  Different effects
			 */

			// Change title type, overlay closing speed
			$(".fancybox-effects-a").fancybox({
				helpers: {
					title : {
						type : 'outside'
					},
					overlay : {
						speedOut : 0
					}
				}
			});

			// Disable opening and closing animations, change title type
			$(".fancybox-effects-b").fancybox({
				openEffect  : 'none',
				closeEffect	: 'none',

				helpers : {
					title : {
						type : 'over'
					}
				}
			});

			// Set custom style, close if clicked, change title type and overlay color
			$(".fancybox-effects-c").fancybox({
				wrapCSS    : 'fancybox-custom',
				closeClick : true,

				openEffect : 'none',

				helpers : {
					title : {
						type : 'inside'
					},
					overlay : {
						css : {
							'background' : 'rgba(238,238,238,0.85)'
						}
					}
				}
			});

			// Remove padding, set opening and closing animations, close if clicked and disable overlay
			$(".fancybox-effects-d").fancybox({
				padding: 0,

				openEffect : 'elastic',
				openSpeed  : 150,

				closeEffect : 'elastic',
				closeSpeed  : 150,

				closeClick : true,

				helpers : {
					overlay : null
				}
			});

			/*
			 *  Open manually
			 */

			$("#fancybox-manual-a").click(function() {
				$.fancybox.open('1_b.jpg');
			});

			$("#fancybox-manual-b").click(function() {
				$.fancybox.open({
					href : 'iframe.html',
					type : 'iframe',
					padding : 5
				});
			});

			$("#fancybox-manual-c").click(function() {
				$.fancybox.open([
					{
						href : '1_b.jpg',
						title : 'My title'
					}, {
						href : '2_b.jpg',
						title : '2nd title'
					}, {
						href : '3_b.jpg'
					}
				], {
					helpers : {
						thumbs : {
							width: 75,
							height: 50
						}
					}
				});
			});


		});
	</script>